<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
            position: relative;
            font-family: 微软雅黑;
            overflow: visible;
            height: 250px;
        }
        #top {
            background-color: #F0F3F5;
            height: 110px;
            width: 100%;
        }
        #daohang {
            height: 30px;
            background: #545652;
        }
        #search {
            height: 70px;
        }
        #search_text {
            position: absolute;
            left: 40%;
            top: 20px;
            width: 30%;
            height: 32px;
            padding-left: 10px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border: none;
            box-shadow: 2px 2px 1px #888888;
        }
        #search_button {
            position: absolute;
            left: 70%;
            top: 20px;
            width: 37px;
            height: 34px;
            font-size: 0;
            cursor: pointer;
            background: url(search.png)no-repeat;
            background-color: #9099A1;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            border: none;
        }
        #daohang>a {
            color: #D5D5D5;
            line-height: 30px;
            left: 15px;
            margin: 8px;
        }
        #middle{
            height: 100px;

            display: flex;
        }
        #foot{
            height: 1000px;
            display: flex;

        }
        #left{
            width: 70%;
            height: 100%;

        }
        #right{
            width: 30%;
            height: 100%;

        }
        #select_movie{

            left: 10%;
        }
        #search_value{
            left: 5%;
        }
    </style>
    <script type="text/javascript" src="ejs.min.js"></script>
</head>
<body>
<div id="top">

    <div id="daohang">
        <form action="" id="biaodan1">
        <a href="../zzy/homepage.html">回到主页</a>
        </form>
      </div>
    <div id="search">
        <form action="" method="get" id="select_movies_form">
            <a href="../zzy/homepage.html" style="left: 25%;top: 20px;font-size: 25px;color: #007722;">酷睿影评</a>
            <input type="text" name="movie_name" id="search_text" placeholder="您想搜索的电影名" maxlength="60">
            <input type="button" value="搜索"  name="wd" id="search_button" onclick="findMovie('select_movies_form')">
        </form>
      </div>

</div>
<div id="middle">
<h1 id="search_value">

</h1>
</div>

<div id="foot">
    <div id="left">
        <div id="select_movie"></div>
    </div>
    <div id="right"></div>

</div>

<script id="temp4FindMovie" type="text/template">
    <%  console.log(find_movie);
    for(var i in find_movie) {%>
    <div class="comment">
        <div style="float: left">
      <a href="../yfj/detail.html?id=<%=find_movie[i].movie_id%>">
        <img  src="<%=find_movie[i].movie_cover%>" style="width: 150px;height: 300px;" ></a></div>
        <div style="float: left">
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>片名：</strong></span><span><%=find_movie[i].movie_name%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>导演：</strong></span><span><%=find_movie[i].movie_director%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>编剧：</strong></span><span><%=find_movie[i].movie_writer%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>主演：</strong></span><span><%=find_movie[i].movie_actor%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>类型：</strong></span><span><%=find_movie[i].movie_type%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>地区：</strong></span><span><%=find_movie[i].movie_region%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>语言：</strong></span><span><%=find_movie[i].movie_lang%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>上映日期：</strong></span><span><%=: find_movie[i].movie_date | time%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>集数：</strong></span><span><%=find_movie[i].jishu%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>片长：</strong></span><span><%=find_movie[i].movie_length%></span><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span><strong>别名：</strong></span><span><%=find_movie[i].movie_alias%></span><br>

    </div>
    </div><br><br>
    <%  }  %>
</script>
<script>
    //根据电影名查找电影详情
    function findMovie(id){
        var fom = document.getElementById(id);
        var formData = new FormData(fom);
        var data = null;
// 将搜索框的内容显示在H1里面
      

        var bb=document.getElementById('search_text');
        var aaa=document.getElementById('search_value');
        aaa.innerHTML='搜索 '+bb.value;

        fetch('/CoolReal/moviebyname',{
        	 credentials: 'include',
            method: 'POST',
            body: encodeURI(Array.from(formData.entries()).map(el=>el.join('=')).join('&')),
                headers:{
            "Content-type":"application/x-www-form-urlencoded;charset=utf-8"
        }
    }).then(function(res) {
            return res.json();
        }).then(function(data) {
            if (!data) {
                return;
            }
            //转化为字符串
            ejs.filters.time = function(d){
                var date = new Date(d);
                if (date instanceof Date) {
                    return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
                }
            }
            
            var temp4FindMovie = document.getElementById('temp4FindMovie');
            var html = ejs.render(temp4FindMovie.innerHTML, {find_movie: data});
            var select_movie = document.getElementById('select_movie');
            select_movie.innerHTML = html;
        });
    }

</script>




<script >
    var f=new FormData(document.forms[0]);
    fetch('/CoolReal/display',{
        credentials: 'include',
        method:'POST',
        body:encodeURI(Array.from(f.entries()).map(el=>el.join('=')).join('&')),
            headers:
    {
        'content-type':'application/x-www-form-urlencoded;charset=utf-8'
    }
    }).then(function(res) {
        return res.json();
    }).then(function(data) {

        if(data && data.status==1){
            var frm=document.querySelector('#biaodan1')
            frm.denglu.innerText=data.data.user_name;
            frm.password.value=data.data.password;
            frm.mail.value=data.data.user_mail;
            frm.phone.value=data.data.user_phone;

        }
    });



</script>

</body>
</html>
